<template>
    <div>
        <!-- 批量删除按钮开始 -->
        <el-button type="danger" round @click="open" size='small'>批量删除</el-button>
        <!-- 批量删除按钮结束-->
        
        <!-- 表单开始 -->
        <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>
            <el-table-column
            label="序号"
            prop='number'
            width="160">
            </el-table-column>
            <el-table-column
            prop="comment"
            label="评论内容"
            width="200">
            </el-table-column>
            <el-table-column
            prop="numberone"
            label="评论人编号"
            width='170'>
            </el-table-column>
            <el-table-column
            prop="numbertwo"
            label="咨询编号"
            width='170'>
            </el-table-column>
            <el-table-column
            label="日期"
            width="200"
            show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
           
            <el-table-column
              prop="status"
              label="状态"
              align="center"
              filter-placement="bottom-end">
           <template slot-scope="scope">
           <el-tag
             :type="scope.row.status === '通过' ? 'success' : scope.row.status === '不通过' ? 'danger' : 'info'"
              disable-transitions>{{scope.row.status}}</el-tag>
           </template>
            </el-table-column>
            <el-table-column
            label="操作">
            <el-button @click="toggleSelection()" size="mini">删除</el-button>
            </el-table-column>
        </el-table>
        <!-- 表单结束 -->
    </div>
</template>
<script>
  export default {
      data() {
      return {
        formInline: {
          user: '',
          region: ''
        }
      }
    },
      data() {
      return {
        tableData: [{
            number:'1',
            comment:'咨询写的真不错',
            numberone:'11',
            numbertwo:'21',
            date:'1999-11-21 00:00:00',
            
        },{
            number:'2',
            comment:'咨询写的一般般',
            numberone:'10',
            numbertwo:'30',
            date:'2000-10-30 00:00:00',
        },{
            number:'3',
            comment:'咨询写的很一般',
            numberone:'06',
            numbertwo:'04',
            date:'2000-06-04 00:00:00',
        },{
            number:'4',
            comment:'咨询写的有点水平',
            numberone:'02',
            numbertwo:'17',
            date:'2020-02-17 00:00:00',
        },
        ],
        multipleSelection: []
      }
    },
    methods: {
        // 删除按钮弹框
      open() {
        this.$alert('此操作将永久批量删除数据，是否继续？', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
      },
        toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },

       
      }
    }
  
</script>